<template>
  <!-- <view class="notice-bar" @tap="handleTapNotice">
      <u-notice-bar :text="text1" v-if="text1.length > 0"></u-notice-bar>
    </view> -->
  <MidLayout>

   

    <IndexTitle zh_text="展厅&工厂" en_text="Showroom & Factory" ></IndexTitle>
  
    <view class="row-gap-20 gray">
      <view v-for="union, index in props.unionList" :key="union.id" @tap="handleClick(union)">
        <view class="card1">
          <view class="image-wrapper">
            <up-image :src="union.image" height='200rpx' mode='aspectFill' :showMenuByLongpress="false"></up-image>
          </view>
          <!-- <view style="padding: 10rpx 2rpx;">
            <u-line direction="col"></u-line>
          </view> -->
          <view class="pos-info" @tap.stop="openMap(union)">
            <view class="dist-label" v-if="union.dist > 0">
              <view v-if="index == 0">
                <u-tag text="最近" size="mini" type="warning"></u-tag>
              </view>
              <u--text :text="union.dist + 'km'" size="10" color="#737373"></u--text>
            </view>

            <u-icon name="map" size="24"></u-icon>
          </view>
        </view>
      </view>

    </view>
  </MidLayout>

</template>

<script setup lang="ts">
import {defineProps } from 'vue'
import IndexTitle from '@/pages/walls/index-title.vue'
const props = defineProps({
  unionList:{
    type:Array,
    default:[]
  }
})

const openMap = (item) => {
  wx.openLocation({
    latitude: item.geo_location.location.lat,
    longitude: item.geo_location.location.lng,
    name: item.geo_location.title,
  })
}




const handleClick = (union) => {

  if(union.open_type == '1'){
    
    uni.navigateTo({
      url:`/pages/web/index?url=${union.official_account_article_url}&title=${union.title}`
    })
  }

 
}




</script>

<style lang="scss" scoped>
.mid-image-font {
  margin-bottom: 15rpx;
}

.notice-bar {
  margin-top: 20rpx;
}

.gray {
  // background-color: #f0f0f0;
}

.card1 {
  display: flex;
  flex-direction: row;

  overflow: hidden;
  border-radius: 10rpx;
  background-color: #fff;
  // border: 1rpx solid #d0d0d0 ;
}

.image-wrapper {

  width: 78vw;

  height: 200rpx;

}

.pos-info {

  flex:1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;

  background-color: #f1f1f1;

  .dist-label {
    position: absolute;
    top: 0;
    right: 0;

  }
}
</style>
